<template>
<div>

    <div v-for="(item ,i) in acticle" :key='i' class="artic">
        <div style="margin-top:15px"><router-link :to="'/Details/'+item.title">{{item.title}}</router-link></div>
        <div style="margin-top:20px">{{item.count}}</div>
        <div style="margin-top:15px"><span>{{item.time}} |</span>    <span> 评论(6) |</span>  <span>点赞(20)</span> </div>

    </div>

    <router-view></router-view>
</div>

</template>
<script>
export default {
    name: 'Article',
    data() {
        return {
            acticle: [{ count: 'nodejs如何打酱油', title: '虎哥nodejs如何打酱油', test: 'node.js', time: '2020/03/02' }, { count: 'docker部署阿里云', title: 'dacker初始', test: '1', time: '2020/03/02' }, { count: 'docker部署阿里云', title: 'dacker初始', test: '1', time: '2020/03/02' }, { count: 'docker部署阿里云', title: 'dacker数据卷', test: '1', time: '2020/03/02' }, { count: 'docker部署阿里云', title: 'dacker初始', test: '1', time: '2020/03/02' }, { count: 'nodejs如何打酱油', title: '虎哥nodejs如何打酱油', test: 'node.js', time: '2020/03/02' }, { count: 'docker部署阿里云', title: 'dacker初始', test: '1', time: '2020/03/02' }, { count: 'docker部署阿里云', title: 'dacker初始', test: '1', time: '2020/03/02' }, { count: 'docker部署阿里云', title: 'dacker数据卷', test: '1', time: '2020/03/02' }, { count: 'docker部署阿里云', title: 'dacker初始', test: '1', time: '2020/03/02' }],
            open: true
        }
    },
    methods: {
        detail() {

        }
    }
}
</script>
s <style lang="less" scoped>
.artic{
    font-size: 16px;
    color: #ccc;

    a:link {
    color: LimeGreen !important;
}

  span{
      margin-right: 5px;
  }

}
</style>
